
document.addEventListener('DOMContentLoaded', ()=>{
  document.querySelector('.zp-button-default-html').innerHTML = hljs.highlight(`<script src="http://zx4.com:8001/kits/webcomponents/form/button.js" type="module" defer></script>
<zp-button>主色按钮</zp-button>
<zp-button color="second">次色按钮</zp-button>
<zp-button color="warning">警告按钮</zp-button>
<zp-button color="error">危险按钮</zp-button>
<zp-button color="info">提示按钮</zp-button>
<zp-button color="success">成功按钮</zp-button>
<zp-button color="black">黑色按钮</zp-button>
<zp-button color="white">白色按钮</zp-button>
<zp-button color="gold">金色按钮</zp-button>`,
    {language: 'xml'}
  ).value;

  document.querySelector('.zp-button-ghost-html').innerHTML = hljs.highlight(`<script src="http://zx4.com:8001/kits/webcomponents/form/button.js" type="module" defer></script>
<zp-button type="ghost">幽灵按钮</zp-button>
<zp-button type="ghost" color="error">幽灵按钮</zp-button>
<zp-button type="ghost" color="error" border-type="dashed">幽灵虚线按钮</zp-button>`,
    {language: 'xml'}
  ).value;

  document.querySelector('.zp-button-disabled-html').innerHTML = hljs.highlight(`<script src="http://zx4.com:8001/kits/webcomponents/form/button.js" type="module" defer></script>
<zp-button disabled>禁用按钮</zp-button>
<zp-button type="ghost" disabled>禁用按钮</zp-button>`,
    {language: 'xml'}
  ).value;

  document.querySelector('.zp-button-loading-html').innerHTML = hljs.highlight(`<script src="http://zx4.com:8001/kits/webcomponents/form/button.js" type="module" defer></script>
<script src="http://zx4.com:8001/kits/webcomponents/animate/loading/circle.js" type="module" defer></script>

<zp-button status="loading">加载中..</zp-button>
<zp-button class="loadingdelay">1s延迟</zp-button>

<script>
document.querySelector('.loadingdelay').onclick = function(){
  this.setAttribute('status', 'loading');
  setTimeout(() => {
    this.removeAttribute('status');
  }, 1000);
};
</script>
`,
    {language: 'javascript'}
  ).value;

  document.querySelector('.zp-button-more-html-color').innerHTML = hljs.highlight(`<script src="http://zx4.com:8001/kits/webcomponents/form/button.js" type="module" defer></script>
<zp-button color="second" style="--zp-second:pink">自定义颜色</zp-button>
<zp-button style="--zp-primary:linear-gradient(90deg,rgb(22,113,216),#1fbdff)">自定义渐变颜色</zp-button>
<zp-button radius="50px">超圆角按钮</zp-button>
<zp-button radius="0">直角按钮</zp-button>
<zp-button style="font-size:18px" radius="10px">大号按钮</zp-button>`,
    {language: 'xml'}
  ).value;

  document.querySelector('.loadingdelay').onclick = function(){
    this.setAttribute('status', 'loading');
    setTimeout(() => {
      this.removeAttribute('status');
    }, 1000);
  };
});